<template>
	<view>
		<view class="item" v-for="(v,o) in integralData" :key="o" v-if="integralData.length > 0">
			<view class="title">
				{{ v.title }}BOSS
			</view>
			<view class="changeWarp">
				<view class="left">
					<image :src="v.imgurl" mode="" class="levelImg"></image>
				</view>
				<view class="right">
					<!-- <view class="">
						<p>当前持有</p>
						<p>{{ v.count }}</p>
					</view> -->
					<view class="">
						<p>释放周期</p>
						<p>{{ v.cycle }}</p>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="need">
					兑换所需：{{v.integral}}
				</view>
				<button size="mini" type="primary" @tap="exchange(v)">立即兑换</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { selecTreasure, UpdateIntegral, UpdateMedal } from "@/api/index.js"
	export default {
		data() {
			return {
				myIntegral: 0,
				integralData: [
					{
						title: "青铜宝箱",
						imgUrl: 'https://longyugou.top:8008/small/child/rb.png',
						weekly: 30,
						count: 20,
						need: 20
					},
					{
						title: "黄金宝箱",
						imgUrl: 'https://longyugou.top:8008/small/child/rb.png',
						weekly: 30,
						count: 20,
						need: 20
					}
				]
			}
		},
		onLoad(data) {
			console.log(JSON.parse(decodeURIComponent(data.myIntrgral)),'pppppppppp');
			this.myIntegral = JSON.parse(decodeURIComponent(data.myIntrgral))
			this.selecTreasures()
		},
		methods: {
			async selecTreasures(){
				let res = await selecTreasure();
				this.integralData = res.data
			},
			async exchange(data){
				console.log(data,this.myIntegral,'data.integral');
				// let myIntegral = this.$store.state.myIntrgral;
				let user = uni.getStorageSync("users")
				let temTitle
				if(data.integral < this.myIntegral) {
					let temTntegral = this.myIntegral - data.integral;
					await UpdateIntegral({integral:temTntegral,user})
					await UpdateMedal({
						medal: data.title,
						medalcount: data.integral,
						user
					})
					this.$store.commit("exchange",data.integral)
					
				} else {
					uni.showToast({
						title: "积分不足！"
					})
				}
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: aliceblue;
	}
.item {
	width: 90%;
	padding: 20rpx;
	background-color: #fff;
	margin: 20rpx 0;
	margin-left: calc(5% - 20rpx);
}
.title {
	padding: 10rpx;
	border-bottom: 0.5px solid aliceblue;
}
.levelImg {
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}
.changeWarp {
	display: flex;
	padding: 20rpx;
}
/* .left {
	width: 20%;
} */
.right {
	display: flex;
	justify-content: space-around;
	flex: 1;
	text-align: center;
}
.bottom {
	display: flex;
	justify-content: space-between;
	flex: 1;
}
uni-button {
	margin-right: 0;
}
</style>
